/* 
  目标：使用props校验 - 使用多种校验类型
  1. 使用常见类型

*/
import React from 'react';

import PropTypes from 'prop-types';
export default class App extends React.Component {
  render() {
    return (
      <div>
        <Hello
          title="Hello"
          user={{ name: 'John', age: 29 }}
          count={123}
          addFn={() => {}}
          name={<h1>我是name</h1>}
        ></Hello>
      </div>
    );
  }
}

class Hello extends React.Component {
  // static propTypes = {
  //   // 3. 必填项：用isRequired， 语法上可以用链式写法
  //   title: PropTypes.string.isRequired,
  //   // 1. 使用常见类型- 数字
  //   count: PropTypes.number,
  //   addFn: PropTypes.func,
  //   // 2. React元素类型
  //   name: PropTypes.element,
  //   // 4. 特定结构的对象 shape
  //   user: PropTypes.shape({
  //     // 分别指定不同属性类型
  //     name: PropTypes.string.isRequired,
  //     age: PropTypes.number.isRequired,
  //   }),
  // };

  render() {
    const { user } = this.props;
    return (
      <div>
        {user.name} -- {user.age}
      </div>
    );
  }
}

// Hello.propTypes = {
//   // 3. 必填项：用isRequired， 语法上可以用链式写法
//   title: PropTypes.string.isRequired,
//   // 1. 使用常见类型- 数字
//   count: PropTypes.number,
//   addFn: PropTypes.func,
//   // 2. React元素类型
//   name: PropTypes.element,
//   // 4. 特定结构的对象 shape
//   user: PropTypes.shape({
//     // 分别指定不同属性类型
//     name: PropTypes.string.isRequired,
//     age: PropTypes.number.isRequired,
//   }),
// };
